<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <input type="text" v-model="msg">
    <br>
    千米：<input type="text" v-model="kilometers">
    <br>
    米：<input type="text" v-model="meters">
    <input type="text" v-model="mystr">
    <div id="box"></div>
  </div>
  <script src="./vue.js"></script>
  <script>
    // watch 侦听器 
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: "你好",
          meters: 0,
          kilometers: 0,
          mystr: "干饭1",
          obj: {
            name: 1,
            age: 2
          }
        }
      },
      methods: {

      },
      computed: {},
      // 虽然计算属性在大多数情况下更合适，
      // 但有时也需要一个自定义的侦听器。
      // 这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，
      // 来响应数据的变化。
      // 当需要在数据变化时执行异步或开销较大的操作时，
      // 这个方式是最有用的。


      /*
    计算属性和侦听器
    Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
    当你有一些数据需要随着其它数据变动而变动时，
    你很容易滥用 watch——特别是如果你之前使用过 AngularJS。
    然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调  
    */
      watch: {
        //监控数据的变化 可以监听路由变化 监听计算属性变化 监听vuex中的数据变化
        msg(newVal, oldVal) {
          console.log(newVal, oldVal)
        },
        meters(newVal, oldVal) {//监听米的变化改变千米
          this.kilometers = newVal / 1000;
          this.meters = newVal;
        },
        kilometers(newVal, oldVal) {//监听千米的变化 改变米
          this.kilometers = newVal;
          this.meters = newVal * 1000;
        },
        // obj(newVal, oldVal) { },
        obj: {
          handler(newVal, oldVal) {
            console.log(newVal, oldVal)
          },
          // 代表在wacth里声明后立即先去执行handler方法
          // immediate: true, //提前调用一次计算属性
          deep: true,//深度监听 一般监听引用数据类型
        }
      }
    })
    // 全局实例
    vm.$watch('mystr', function (newVal, oldVal) {
      document.getElementById("box").innerHTML = newVal;
    })
    vm.obj.name = "张三"
  </script>
</body>

</html>